<template>
    <div class="card_box">
        <div v-if="chartData.classify == 0" class="chart_box">
            <chadeChart :datas="chartData" :posterHeight="posterHeight">
                <template v-slot>
                    <p class="meal" @click="dialogFormVisible = true">查看套餐内三个模版</p>
                </template>
            </chadeChart>
            <Teleport to="body">
                <el-dialog v-model="dialogFormVisible" title="套图详情">
                    <div class="mea_div">
                        <cerdMuch :datas="chartData"></cerdMuch>
                        <longChart :datas="chartData" :longHeight="'370'"></longChart>
                        <posterChart :datas="chartData" :posterHeight="'300'"></posterChart>
                    </div>
                </el-dialog>
            </Teleport>
            <!-- 全有 -->
        </div>
        <div v-else-if="chartData.classify == 1" class="chart_box">
            <cerdMuch :datas="chartData" :height="height"></cerdMuch>
            <!-- 轮播图 -->
        </div>
        <div v-else-if="chartData.classify == 2" class="chart_box">
            <longChart :datas="chartData" :longHeight="longHeight"></longChart>
            <!-- 是长图 -->
        </div>
        <div v-else-if="chartData.classify == 3" class="chart_box">
            <posterChart :datas="chartData" :posterHeight="posterHeight"></posterChart>
            <!-- 海报 -->
        </div>
        <div v-else-if="chartData.classify == 4" class="chart_box">
            <chadeChart :datas="chartData" :posterHeight="posterHeight">
                <template v-slot>
                    <p class="meal" @click="dialogFormVisible = true">查看套餐内两个模版</p>
                </template>
            </chadeChart>
            <Teleport to="body">
                <el-dialog v-model="dialogFormVisible" title="套图详情">
                    <div class="mea_div">
                        <cerdMuch :datas="chartData" :height="height"></cerdMuch>
                        <longChart :datas="chartData" :longHeight="'370'"></longChart>
                    </div>
                </el-dialog>
            </Teleport>
            <!-- 轮播加长图 -->
        </div>
        <div v-else-if="chartData.classify == 5" class="chart_box">
            <chadeChart :datas="chartData" :posterHeight="posterHeight">
                <template v-slot>
                    <p class="meal" @click="dialogFormVisible = true">查看套餐内两个模版</p>
                </template>
            </chadeChart>
            <Teleport to="body">

                <el-dialog v-model="dialogFormVisible" title="套图详情">
                    <div class="mea_div">
                        <cerdMuch :datas="chartData" :height="height"></cerdMuch>
                        <posterChart :datas="chartData" :posterHeight="'300'"></posterChart>
                    </div>
                </el-dialog>
            </Teleport>
            <!-- 轮播加海报 -->
        </div>
        <div v-else-if="chartData.classify == 6" class="chart_box">
            <chadeChart :datas="chartData" :posterHeight="posterHeight">
                <template v-slot>
                    <p class="meal" @click="dialogFormVisible = true">查看套餐内两个模版</p>
                </template>
            </chadeChart>
            <Teleport to="body">
                <el-dialog v-model="dialogFormVisible" title="套图详情">
                    <div class="mea_div">
                        <longChart :datas="chartData" :longHeight="'370'"></longChart>
                        <posterChart :datas="chartData" :posterHeight="'300'"></posterChart>
                    </div>
                </el-dialog>
            </Teleport>
            <!-- 长图加海报 -->
        </div>
        <div v-else-if="chartData.classify == 9" class="chart_box">
            <videoChart :datas="chartData" :videoHeight="videoHeight">
            </videoChart>


            <!-- 视频 -->
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import cerdMuch from '../../components/Cardchi/cerdMuch.vue';
import longChart from '../Cardchi/longChart.vue';
import posterChart from '../Cardchi/posterChart.vue';
import chadeChart from '../../components/Cardchi/chadeChart.vue';
import videoChart from '../../components/Cardchi/VideoS.vue';
const dialogFormVisible = ref(false);
type chartDataType = {
    cerdMuch: string[];
    longChart: string;
    poster: string;
}
const data: any = reactive({
    chartData: {},
});
const { chartData } = defineProps({
    height: {
        type: String,
        default: '240'
    },
    longHeight: {
        type: String,
        default: '370'
    },
    posterHeight: {
        type: String,
        default: '300'
    },
    videoHeight: {
        type: String,
    },
    chartData: {
        type: Object,
        default: {} as {}
    }
});
data.chartData = chartData;

</script>

<style scoped lang="scss">
.chart_box {
    padding-left: 0;
    margin-left: 0;

    >div {
        margin-left: 0;
    }
}

div {

    margin-left: 15px;

}

.card_box {
    padding: 0;
    margin: 0;
}

.box_c_l_p {
    position: relative;
}

.meal {
    cursor: pointer;
    background: #1261FF;
    height: 30px;
    line-height: 30px;
    border-radius: 30px;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translateX(-65px);
    font-size: 12px;
    color: #fff;
    width: 130px;
    text-align: center;
}

.mea_div {
    width: calc(100% - 50px);
    display: flex;
    justify-content: space-around;
    padding: 0 0 80px 0;
}

.el-dialog {
    width: 70vw !important;
    margin: 0 !important;
}</style>